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CLOUDFLARE 


|. Executive Summary 


Study after study has confirmed that consumers expect fast, seamless experiences when they use websites and 
web apps. If your website is not fast and performant, you are likely missing out on huge business opportunities. 


There are three main areas where Cloudflare can boost your web performance: server responsiveness, network 
latency, and content optimization. This paper puts a spotlight on the third area: content optimization. 


We will go over how Cloudflare optimizes your content to ensure your users have a superior customer experience. 
Cloudflare does this by supporting the latest and fastest web protocols, optimizing images and video for fastest 
delivery, and using modern compression techniques to reduce file size. 
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What is content optimization? 


Cloudflare content optimization 


For any web property, a variety of components make up the 
content that needs to be delivered from the origin server to the 
end user, including images, video, CSS and JavaScript files, 
and HTML. 


The Cloudflare global network spans 200 cities in more than 
90 countries. We cache static assets across our network and 
always direct end users to the closest data center, minimizing latency. We create an optimized version of your 
original assets in a much smaller file size. By optimizing both content file size and network paths, we offer super 
fast load times on the shortest possible path to the user. 


Cloudflare enables you to: 


e Use faster protocols to vastly reduce network latency and to reprioritize content so large resources, such as 
JavaScript files, do not block the page from loading 


* Optimize and compress images to speed up load times 
* Convert video files using modern codecs to simplify streaming 


* Efficiently compress files for faster loading using Brotli and gzip compression 


<Q 1. Faster web protocols 


Cloudflare is an industry leader in supporting new and more efficient web protocols. 


M 


HTTP/2 is much faster and more efficient than HTTP/1.1, the earlier version of HTTP that is 
still in wide use on the Internet, thanks to a number of added features and improvements to 
the protocol. 


HTTP/2 Prioritization: In HTTP/2, developers have hands-on, detailed control over prioritization, or the order in 
which content loads. This allows them to maximize page load speed, even across different browsers, to a degree 
that was not possible in HTTP/1.1. 


In the context of web performance, prioritization refers to the order in which pieces of content are loaded. 
Prioritization affects a webpage's load time. Certain resources may block the rest of the page from loading if they 
have to load first: these are known as render-blocking resources. 


Large JavaScript files, for instance, may not need to load right away for page functionality, but if they have to load 
before the rest of the content does, they can delay the user's ability to interact with the content. By prioritizing large 


JavaScript files last, developers ensure the rest of the page loads first and loads more efficiently. 


Currently, Cloudflare is the only CDN (content delivery network) provider to support HTTP/2 prioritization. In addition, 


Cloudflare has built a prioritization engine specifically for resource handling in HTTP/2 so that all webpages load 
faster on any browser. Developers are able to customize prioritization if desired, but you can also use Cloudflare's 
default settings to automatically speed up load times. 


Multiplexing: HTTP/2 also delivers data more efficiently than HTTP/1.1 by sending several content elements at once 
instead of one at a time. In HTTP/2, when a client makes a request for a webpage, the server sends several streams 
of data to the client simultaneously, instead of sending one thing after another. This method of data delivery is 
known as multiplexing. 


Other HTTP/2 speed improvements include: 
* Header compression: Smaller HTTP headers can reach client devices faster 
* Server push: Servers can deliver content before client devices request it, cutting down the number of round trips 
* Stream priority: Browsers can request which assets they want to receive first for more efficient page loading 


* As a result of all these improvements, websites using HTTP/2 load up to 14% fasterl than those using HTTP/1.1. 


* Enabling HTTP/2 makes your web properties load faster and more efficiently, before the rest of your content is 
even optimized. 


2. Image optimization and compression 


Image optimization is the process of preparing images to load quickly across a variety 

of devices and screen sizes. Non-optimized images can massively slow down a website. 
There are several ways to speed up image loading, from optimizing the images themselves 
to speeding up the behind-the-scenes processes involved in loading the images. 


Resizing for a variety of screen sizes 


Using high-quality images is important for keeping 
users engaged, but image files do not need to be 
massive. Smaller images in terms of file size load 
faster. Overly large images or high- resolution images 
can have a huge impact on page load time, and they 
are usually unnecessary. 


Consider this photo of Cloudflare’s Lava Lamp Wall: 
On a regular DPI screen, these images look the same, 


yet the image on the right takes more than 20 times 
more data to load. 


To keep image files as small as possible, images should be optimized for the specific screen size they are loading 
on. Larger images should only load for larger screens; on smaller screens, smaller images can be used so that they 
load even faster; full-resolution images should not be used at all. 


This requires a ton of work from developers to resize images and to maintain a catalog of image variants for multiple 
device types. However, Cloudflare Image Resizing does this automatically, creating multiple copies from a single 
master file and serving them from Cloudflare's cache. This significantly reduces the number of images you need to 
manage and maintain in your catalog. The result: Faster page load times across all devices, from smartphones to 
desktops, and a better user experience. 


coe GIO Automatic conversion to WebP 


Parallel streaming of progressive images is possible by leveraging HTTP/2 prioritization. 
To stream images in parallel, the server prioritizes image data in the following way: 


The image header that contains the image size is very high priority, because the browser 

needs to know the size as soon as possible to do page layout. The image header is small, 
so it doesn't hurt to send it ahead of other data. Loading this first prevents the page from “jumping” as the rest of 
the images load. 


The minimum amount of data in the image required to show a preview of the image has a medium priority. 


The remainder of the image data is low priority. Browsers can stream it last to refine image quality once there's no 
rush, since the page is already fully usable. 


Parallel streaming for progressive images 


Progressive image loading is a method for reducing the time it takes for images to load. 


JA 


js e” Progressive images initially load at a lower quality level, but load more information over 
S time. In this way, the image loads quickly at first, and then within seconds it improves in 
L : quality. The user does not have to wait for the page to load yet still gets the benefits of a 

/ | \ high-quality image. 


Cloudflare offers parallel streaming of progressive images: streaming multiple images at once instead of one ata 
time. In addition to being more efficient, parallel streaming helps eliminate page jumps as the page loads, improving 
the user experience. 


Parallel streaming of progressive images is possible by leveraging HTTP/2 prioritization. To stream images in parallel, 
the server prioritizes image data in the following way: 


The image header that contains the image size is very high priority, because the browser needs to know the size 
as soon as possible to do page layout. The image header is small, so it doesn't hurt to send it ahead of other data. 


Loading this first prevents the page from “jumping” as the rest of the images load. 


The minimum amount of data in the image required to show a preview of the image has a medium priority. 


The remainder of the image data is low priority. Browsers can stream it last to refine image quality once there's 
no rush, since the page is already fully usable. 


3. Video optimization and delivery 


> Consumers today expect to be able to interact with a variety of content as they visit web 
properties and use apps. Video content is more important for user engagement now than ever. 


However, slow-loading video content can have a negative impact on user engagement. Non- 

optimized embedded video can slow down page load times, frustrating users. Each 1-second 
buffering delay in video playback results in a 5.8% percent increase in user abandonment rates. Fortunately, 
Cloudflare helps you optimize the video encoding and delivery process. 


Cloudflare Stream is an online video platform that supports modern video encoding so publishers do not have to 
continually update to more efficient codecs. It is an end-to-end platform; eliminating the need to maintain a video 
streaming infrastructure. In addition, the Cloudflare global network vastly speeds up streaming delivery times to end 
users around the world, and it optimizes video resolution for the end user via our HTML5 player. 


Cloudflare Stream supports modern video streaming protocols such as MPEG-DASH and HLS. Adaptive bitrate 
streaming is a feature of these protocols; adaptive bitrate streaming dynamically adjusts video quality in response 
to network conditions, so that users always get the best possible video quality without waiting for the video to 
buffer for several seconds. 


4. Compression 


Reducing file size increases loading speed, which is why compression is such an 
important technology for optimizing your content for the Internet. A compressed file will 
load much faster than an uncompressed one, as less data needs to be transferred. 


Brotli compression is one of the most effective types of compression available today for web content. In 

wide use since it was developed in 2016, Brotli compression is supported by all major browsers. It works by 
compressing text using a dictionary of common phrases. This makes it well-suited for compressing HTML, CSS, 
and JavaScript files, cutting fractions of a second off your page load time. 


Brotli compression is lossless: it does not impact or reduce the quality of your content. However, it does reduce file 
size by a greater degree than other types of compression: 


* HTML files compressed with Brotli are 21% smaller than those compressed with gzip 
+ JavaScript files are 14% smaller than gzip 
+ CSS files are 17% smaller than gzip5 


Cloudflare customers can toggle on Brotli compression within the Cloudflare Dashboard with a single click. 
Cloudflare also offers gzip compression in case Brotli is not supported by a customer (gzip compression also 
speeds up content, but not by as much as Brotli compression). 


Conclusion 


Improving the performance of your Internet-facing properties requires a multifaceted approach that involves 
minimizing network latency, improving server responsiveness, and reducing file sizes. Cloudflare can minimize the 
effort involved to optimize web assets and significantly improve page load times. Contact Cloudflare today to set up 
a trial or evaluation and experience the benefits of a faster Internet. 


About Cloudflare 


Cloudflare, Inc. is on a mission to help build a better Internet. Cloudflare's platform protects and accelerates 

any Internet application online without adding hardware, installing software, or changing a line of code. Internet 
properties powered by Cloudflare have all web traffic routed through its intelligent global network, which gets 
smarter with every request. As a result, they see significant improvement in performance and a decrease in spam 
and other attacks. Cloudflare was named to Entrepreneur Magazine's Top Company Cultures 2018 list and ranked 
among the World's Most Innovative Companies by Fast Company in 2019. Headquartered in San Francisco, CA, 
Cloudflare has offices in Austin, TX, Champaign, IL, New York, NY, San Jose, CA, Seattle, WA, Washington, D.C., 
Lisbon, London, Munich, Beijing, Singapore, and Sydney. 
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